<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Complex DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.1.2.2.js"></script>
   
	<script type="text/javascript">
	 	var a = document.documentElement.clientHeight;
		function resizeGrid(){
			var a = document.documentElement.clientHeight;
			$('#test').datagrid('resize', {
				width:function(){return document.documentElement.clientWidth*0.9;},
				height:a
 	  		 });
		}
		function openwin(){
			$('#dd').window({
				closed:true,
				width: 400,
				height:600
			});
					
		}
		
		$(function(){
			 openwin();
			
			$('#test').datagrid({
				url:'datagrid_data.json',	
		    	width:function(){return document.documentElement.clientWidth*0.9},
				height:a,
				iconCls:'icon-save',
				nowrap: false,
				striped: true,				 
				collapsible:true,
				autoRowHeight: false,		
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				fitColumns:true,
				/*singleSelect:true,*/
				columns:[[
					{field:'ck',checkbox:true},
	                {title:'code',field:'code',width:$(this).width() * 0.25,sortable:true},
			        {title:'name',field:'name',width:$(this).width() * 0.25},
					{title:'address',field:'addr',width:$(this).width() * 0.25},
					{title:'第四字段',field:'col4',width:$(this).width() * 0.25}
				]],	 	 
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						$('#dd').dialog({
							'open':true,
							'modal':true
						});
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			$(p).pagination({
				onBeforeRefresh:function(){
					alert('before refresh');
				}
			});
		});
		function loadDataGrid(){}
		
		
		function resize(){
			 $(window).resize(function(){
				$('#test').datagrid('resize');
			});
		}
		
		function getSelected(){
			var selected = $('#test').datagrid('getSelected');
			if (selected){
				alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
			}
		}
		function getSelections(){
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			for(var i=0;i<rows.length;i++){
				ids.push(rows[i].code);
			}
			alert(ids.join(':'));
		}
		function clearSelections(){
			$('#test').datagrid('clearSelections');
		}
		function selectRow(){
			$('#test').datagrid('selectRow',2);
		}
		function selectRecord(){
			$('#test').datagrid('selectRecord','002');
		}
		function unselectRow(){
			$('#test').datagrid('unselectRow',2);
		}
		function mergeCells(){
			$('#test').datagrid('mergeCells',{
				index:2,
				field:'addr',
				rowspan:2,
				colspan:2
			});
		}
	   function save(){
			var name=$('#name').val();
			var age=$('#age').val();
			var email=$('#email').val();
			var address=$('#address').val();
			var str="<tr><td>"+name+"</td><td>"+age+"</td><td>"+email+"</td><td>"+address+"</td></tr>";
			
			$.messager.confirm('确认框','添加成功',function(info){
					if(info == true){
							$('#dd').dialog('close');
				  			alert('OK'+str);
						}
				});
			
	   }
	</script>
	</head>
	<body  onresize="resizeGrid();">
       <table id="test"></table>
       <div id="dd" class="easyui-window" data-options="iconCls:'icon-save'">   
       		<form id="ddFrom" action="" method="post">
            	<table> 
                	<tr>
                    	<td>姓名</td>
                        <td><input  class="easyui-validatebox"  type="text" id="name" required='true' missingMessage='这个字段必须填写'/></td>
                        <td>年龄</td>
                        <td><input class="easyui-numberbox"  type="text"  id="age" precision='2' groupSeparator=','/></td>
                    </tr>
                    <tr>
                    	<td>邮箱</td>
                        <td> <input class="easyui-validatebox" type="text" id="email" validType='email' invalidMessage='请输入正确的格式'/></td>
                        <td>地址</td>
                        <td> <input class="easyui-validatebox" type="text" id="address" ></td>
                    </tr>
                    <tr>
                    	<td>备注</td>
                        <td colspan="3"><textarea id="message" style="height: 47px; width: 289px;"></textarea></td>
                    </tr>
                    <tr>
                    	<td>科目</td>
                        <td>
                        	<select id="subject" class="easyui-combobox" name="subject" >
                            	<option value="1">语文</option>
                                <option value="2">数学</option>
                                <option value="3">英语</option>
                                <option value="4">生物</option>
                         	</select>
                         </td>
                    </tr>
                    <tr>
                    	<td colspan="4"><input type="button" value="保存" onclick="save()"/></td>
                    </tr>
                </table>
            </form>
       </div>
	</body>
</html>